<template>
  <div id="chart" :style="{ height: height, width: width }"></div>
</template>

<script>
import { getCurrentInstance } from "vue";
import resize from "./mixins/resize";

export default {
  name: "SctterComp",
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: String,
      default: "200px",
    },
  },
  data() {
    return {
      SongLists: [
        ["吉林", 1.72, 165],
        ["辽宁", 1.68, 168],
        ["山西", 1.66, 164],
        ["河北", 1.62, 156],
        ["陕西", 1.58, 168],
        ["湖南", 1.58, 176],
        ["新疆", 1.5, 146],
        ["甘肃", 1.54, 155],
        ["四川", 1.48, 157],
        ["内蒙", 1.62, 161],
        ["宁夏", 1.59, 159],
        ["青海", 1.58, 158],
      ],
      ShouLists: [
        ["江苏", 1.86, 184],
        ["天津", 1.84, 176],
        ["安徽", 1.81, 184],
        ["江西", 1.78, 185],
        ["浙江", 1.78, 188],
        ["福建", 1.8, 193],
        ["北京", 1.68, 174],
        ["上海", 1.75, 176],
        ["山东", 1.74, 181],
        ["湖北", 1.72, 186],
      ],
    };
  },
  mounted() {
    // 渲染图表
    const { proxy } = getCurrentInstance();
    this.chart = proxy.$echarts.init(document.getElementById("chart"));

    // 计算送端数据
    const SongNums = this.getCenterMaxMin(this.SongLists);
    const SongData = this.SongLists.map((x) => ({
      name: x[0],
      value: [x[2], x[1]],
    }));
    const SongCenterLine = SongNums.center;
    const SongCenter = SongNums.maxMIn;
    const SongRange = SongNums.range;
    console.log(SongNums);

    // 计算受端数据
    const ShouNums = this.getCenterMaxMin(this.ShouLists);
    const ShouData = this.ShouLists.map((x) => ({
      name: x[0],
      value: [x[2], x[1]],
    }));
    const ShouCenterLine = ShouNums.center;
    const ShouCenter = ShouNums.maxMIn;
    const ShouRange = ShouNums.range;

    let options = {
      backgroundColor: "#333",
      color: ["#0684e1", "#48f8b5"],
      legend: {
        data: ["输出", "输入"],
        left: "center",
        top: "3%",
        itemWidth: 12,
        itemHeight: 12,
        itemGap: 28,
        textStyle: {
          color: "#fff",
          fontSize: 12,
        },
      },
      grid: {
        left: "10%",
        right: "10%",
        bottom: "10%",
        top: "15%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        scale: true,
        name: "单位：万个",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#fff",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#14415b",
            width: 2,
            type: "dashed",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
      },
      yAxis: {
        type: "value",
        scale: true,
        name: "单位：万元/米",
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: "#fff",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#14415b",
            width: 2,
            type: "dashed",
          },
        },
      },
      series: [
        {
          type: "scatter",
          name: "输出",
          data: SongData,
          label: {
            show: true,
            position: "left",
            color: "#fff",
            formatter: "{b}",
          },
          markArea: {
            silent: true,
            data: [
              [
                {
                  name: "输出",
                  xAxis: SongRange[0],
                  yAxis: SongRange[1],
                  itemStyle: {
                    borderWidth: 2,
                    borderType: "dashed",
                    borderColor: "#0684e1",
                    shadowColor: "#0684e1",
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    color: "rgba(56, 180, 139, 0.1)",
                  },
                  label: {
                    position: "insideTop",
                    color: "#fff",
                    fontSize: 22,
                  },
                },
                {
                  xAxis: SongRange[2],
                  yAxis: SongRange[3],
                },
              ],
            ],
          },
          markLine: {
            silent: true,
            precision: 2,
            lineStyle: {
              width: 2,
              type: "solid",
              color: "#0684e1",
            },
            label: {
              show: false,
              color: "#0684e1",
              position: "end",
              formatter: "{b}",
            },
            data: SongCenterLine,
          },
          markPoint: {
            symbol: "pin",
            symbolSize: 70,
            itemStyle: {
              color: "#0684e1",
            },
            label: {
              show: true,
              position: "inside",
              formatter: "{c}",
            },
            data: SongCenter,
          },
        },
        {
          type: "scatter",
          name: "输入",
          data: ShouData,
          label: {
            show: true,
            position: "left",
            color: "#fff",
            formatter: "{b}",
          },
          markArea: {
            silent: true,
            data: [
              [
                {
                  name: "输入",
                  xAxis: ShouRange[0],
                  yAxis: ShouRange[1],
                  itemStyle: {
                    borderWidth: 2,
                    borderType: "dashed",
                    borderColor: "#48f8b5",
                    shadowColor: "#48f8b5",
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    color: "rgba(56, 180, 139, 0.1)",
                  },
                  label: {
                    position: "insideTop",
                    color: "#fff",
                    fontSize: 22,
                  },
                },
                {
                  xAxis: ShouRange[2],
                  yAxis: ShouRange[3],
                },
              ],
            ],
          },
          markLine: {
            silent: true,
            precision: 2,
            lineStyle: {
              width: 2,
              type: "solid",
              color: "#48f8b5",
            },
            label: {
              show: false,
              color: "#48f8b5",
              position: "end",
              formatter: "{b}",
            },
            data: ShouCenterLine,
          },
          markPoint: {
            symbol: "pin",
            symbolSize: 70,
            itemStyle: {
              color: "#48f8b5",
            },
            label: {
              show: true,
              position: "inside",
              formatter: "{c}",
            },
            data: ShouCenter,
          },
        },
      ],
    };

    this.chart.setOption(options);

    // 事件
    this.chart.on("click", function (params) {
      console.log(params);
    });
    // 分辨率调整刷新图表
    window.onresize = () => {
      this.chart.resize();
    };
  },
  methods: {
    Refresh() {
      console.log(this.options);
      this.chart.setOption(this.options);
    },
    // 计算平均数/最大值/最小值
    getCenterMaxMin(lists) {
      let xNum = 0;
      let yNum = 0;
      let yMax = lists[0][1];
      let yMaxList = lists[0];
      let yMin = lists[0][1];
      let yMinList = lists[0];
      let xMax = lists[0][2];
      // eslint-disable-next-line no-unused-vars
      let xMaxList = lists[0];
      let xMin = lists[0][2];
      // eslint-disable-next-line no-unused-vars
      let xMinList = lists[0];
      lists.forEach((element) => {
        xNum += element[2];
        yNum += element[1];
        // y轴最大值
        if (element[1] > yMax) {
          yMax = element[1];
          yMaxList = element;
        }

        // y轴最小值
        if (element[1] < yMin) {
          yMin = element[1];
          yMinList = element;
        }

        // x轴最大值
        if (element[2] > xMax) {
          xMax = element[2];
          xMaxList = element;
        }

        // x轴最小值
        if (element[2] < xMin) {
          xMin = element[2];
          xMinList = element;
        }
      });
      const xAverageNum = (xNum / lists.length).toFixed(2);
      const yAverageNum = (yNum / lists.length).toFixed(2);
      return {
        center: [
          {
            name: "AverageX",
            xAxis: xAverageNum,
          },
          {
            name: "AverageY",
            yAxis: yAverageNum,
          },
        ],
        maxMIn: [
          {
            value: yMax,
            coord: [yMaxList[2], yMaxList[1]],
          },
          {
            value: yMin,
            coord: [yMinList[2], yMinList[1]],
          },
        ],
        range: [xMin, yMin, xMax, yMax],
      };
    },
  },
};
</script>
